<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>队列请求</title>
</head>
<body>
<script>
    class User{
        //加载用户
        ajax(user){
            let url = `http://localhost/basicjs/promise/php/user.php?name=${user}`;
            return new Promise((resolve,reject)=> {
                let xhr = new XMLHttpRequest();
                xhr.open('GET',url);
                xhr.send();
                xhr.onload = function () {
                    if(this.status == 200){
                        resolve(JSON.parse(this.response));
                    }else{
                        reject(this);
                    }
                }
            });
        }

        //启动
        render(users){
            users.reduce((promise,user) => {
                return promise
                    .then(() => {
                        return this.ajax(user);
                    })
                    .then(user => {
                        //获取到用户信息之后，进行页面的渲染
                        return this.view(user);
                    })
                    ;
            },Promise.resolve());
        }

        //渲染视图
        view(user){
            return new Promise(resolve => {
                //每一次调用的时候都要把内容显示在页面上
                //promise等成功的执行完成之后在去执行下面的，这是队列的形式
                let h1 = document.createElement("h1");
                h1.innerHTML = user.name;
                document.body.appendChild(h1);
                //这次必须调用resolve()  因为使用了resolve() 方法，才能继续执行循环里面的then，这就是队列  这个resolve不执行,后面的then就不会执行
                resolve();
            });
        }
    }

    new User().render(['后盾人','向军','李四','王五','赵六']);
</script>
</body>
</html>